import React from 'react';
import { lineConnect } from '../../utils/commonFunc';
import { FirstHeaderC } from '../../comps';
let oneLine;
let twoLine;
let threeLine;

class LineConnect extends React.Component {
  componentDidMount() {
    oneLine = lineConnect(this.start, this.end);
    twoLine = lineConnect(this.start2, this.end);
    threeLine = lineConnect(this.start2, this.end2);
    window.addEventListener('scroll', this.handleScroll, true);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll, true);
    oneLine.remove();
    twoLine.remove();
    threeLine.remove();
  }

  // 监听滚动---页面滚动时刷新连线位置
  handleScroll() {
    oneLine.position();
    twoLine.position();
    threeLine.position();
  }

  render() {
    return (
      <>
        <FirstHeaderC title='dom元素连接' />
        <div className='container' style={{ padding: '20px', display: 'flex', justifyContent: 'space-between' }}>
          <div>
            <div style={{ marginTop: '100px', width: '100px', height: '100px', background: '#08c' }} ref={(end) => (this.end = end)}>
              end
            </div>
            <div style={{ marginTop: '100px', width: '100px', height: '100px', background: '#08c' }} ref={(end2) => (this.end2 = end2)}>
              end
            </div>
          </div>
          <div>
            <div style={{ width: '100px', height: '100px', background: '#08c' }} ref={(start) => (this.start = start)}>
              start
              <br />
              关联一个
            </div>
            <div style={{ marginTop: '100px', width: '100px', height: '100px', background: '#08c' }} ref={(start2) => (this.start2 = start2)}>
              start
              <br />
              关联两个
            </div>
          </div>
        </div>
      </>
    );
  }
}
export default LineConnect;
